<html>
<head>
	<title>Circles</title>
	<style>
		#canvas .circle {
			display: inline-block;
			margin: 1em;
		}

		.circles-decimals {
			font-size: .4em;
		}
	</style>
</head>
<body>
	<div id="canvas">
		<div class="circle" id="circles-1"></div>
		<div class="circle" id="circles-2"></div>
		<div class="circle" id="circles-3"></div>
		<div class="circle" id="circles-4"></div>
		<div class="circle" id="circles-5"></div>
		<br />
		<button id="add_button">Value +10</button>
		<button id="substract_button">Value -10</button>
		<button id="add_width_button">Width +10</button>
		<button id="substract_width_button">Width -10</button>
		<button id="colors_button">Swap colors</button>
	</div>

	<script src="../circles.min.js"></script>
	<script>
		//@ http://jsfromhell.com/array/shuffle [v1.0]
		function shuffle(o){ //v1.0
			for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
			return o;
		}

		var colors = [
			['#D3B6C6', '#4B253A'], ['#FCE6A4', '#EFB917'], ['#BEE3F7', '#45AEEA'], ['#F8F9B6', '#D2D558'], ['#F4BCBF', '#D43A43']
		], circles = [];

		for (var i = 1; i <= 5; i++) {
			var child = document.getElementById('circles-' + i),
				percentage = 31.42 + (i * 9.84);

			circles.push(Circles.create({
				id:         child.id,
				value:		percentage,
				radius:     60,
				width:      10,
				colors:     colors[i - 1]
			}));
		}

		document.getElementById('add_button').onclick = function()
		{
		    for(var i = 0, l = circles.length; i < l; i++)
				circles[i].update(circles[i]._value + 10, 250);
		};

		document.getElementById('substract_button').onclick = function()
		{
			for(var i = 0, l = circles.length; i < l; i++)
				circles[i].update(circles[i]._value - 10, 250);
		};

		document.getElementById('add_width_button').onclick = function()
		{
			for(var i = 0, l = circles.length; i < l; i++)
				circles[i].updateWidth(circles[i]._strokeWidth + 10);
		};

		document.getElementById('substract_width_button').onclick = function()
		{
			for(var i = 0, l = circles.length; i < l; i++)
				circles[i].updateWidth(circles[i]._strokeWidth - 10);
		};

		document.getElementById('colors_button').onclick = function()
		{
			colors = shuffle(colors);
			for(var i = 0, l = circles.length; i < l; i++)
				circles[i].updateColors(colors[i]);
		};
	</script>
</body>
</html>